

<!--<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>-->

<!--<a href="#/layui/meetList" class="layui-btn layui-btn-xs layui-btn-primary" style="margin: 20px 0 0 100px;">
  <i class="layui-icon">&#xe65c;</i>
</a>-->

<form action="" class="layui-form">
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-row">
		    <div class="layui-col-xs12">
		    	<div class="layui-card-header"><h2>发布系统消息</h2>
		      	</div>
		      	<div class="layui-tab" lay-filter="huanTab">
		      		<ul class="layui-tab-title">
		      			<li class="layui-this XX">消息</li>
		      			<li class="mem">成员</li>
		      		</ul>
		      		
		      		<div class="layui-tab-content">
		      			<div class="layui-tab-item layui-show xxtab"> 
					      	<div class="layui-card-body">
					      
					      	
					      	
					      	<table class="layui-table" lay-size="lg" style="table-layout:fixed">
							      <colgroup>
								    <col width="40">
								    <col width="500">
								  </colgroup>
							      <tbody>
							      	<tr>
							      		<td>消息名称：<span class="haveTo">*</span></td>
							      		<td>
							      			<table class="layui-table " lay-size="lg" lay-skin="nob">
							      				<tbody>
							      					<tr>
							      						<td><input type="text" name="infoName" lay-verify="required" class="layui-input infoName input33" > </td>
							      						<td></td>
							      					</tr>
							      					
							      				</tbody>
							      			</table>
							      			
							      		</td>
							      	</tr>
							      	
							      	
							      	
							      	
							      	<tr>
							      		<td>消息详情：<span class="haveTo">*</span></td>
							      		<td class="">
							      			<textarea  class="prodInfo layui-textarea infoDetail" lay-verify="required"></textarea>
											
							      		</td>
							      			
							      	</tr>
							      	
								  </tbody>
							      	
						      </table>
						      
						      </div>	
						      
						      <button class="layui-btn nextStep layui-btn-primary" type="button">下一步</button>
						      
						      
					      </div>
					      <div class="layui-tab-item memTab" lay-id="tabMem">
					      	<table lay-skin="nob">
					      		<tr>
					      			<td>
					      				<tr>
								      		选择会员：
								      		
								      			<table class="layui-table"  lay-size="lg" lay-skin="nob">
								      				<tbody>
								      					<tr>
								      						<td>
								      							<div class="select25">
								      							<select name="selectMem" class="selectMem" lay-verify="">
																  <option value="all">全部会员</option>
																</select> 
																</div>
								      						</td>
								      						<td></td>
								      					</tr>
								      				</tbody>
								      			</table>
								      			
								      		
								      		
								      	</tr>
					      			</td>
					      			<td>
					      				<button class="layui-btn check" type="button"  >查询</button>
					      				<button class="layui-btn selectAll" type="button"  >全选</button>
					      				<div class="member">
								      		
								      	</div>
					      			</td>
					      		</tr>
					      		
					      	</table>
					      	
					      	
					      	
					      	
					      	
					      	<!--<div class="layui-col-md10">
							    	<div class="addFHBtn">
										<button class="layui-btn confirm send" type="button" lay-submit  >确定</button>
										
										<a class="layui-btn meetBtn layui-btn-primary" href="#/layui/xitongXiaoxi">返回</a>
									</div>
							    </div>-->
					      	
					      	<div class="layui-col-md10">
						    	<div class="addFHBtn">
						    		<!--lay-submit-->
						    		<a class="layui-btn meetBtn layui-btn-primary" href="#/layui/xitongXiaoxi">返回</a>
									<button class="layui-btn confirm meetBtn" type="button" lay-submit lay-filter="queding" >确定</button>
									
								</div>
						    </div>
					      	
					      </div>
				      </div>
			      </div>
		    </div>
		    
		    
		    
    	</div>
	</div>
</form>

	
      
      
<script>
	renderForm();
	let infoName = document.querySelector(".infoName");
	let mem = document.querySelector(".mem");
	let xx = document.querySelector(".XX");
	let xxtab = document.querySelector(".xxtab");
	let startTime = document.querySelector(".startTime");
	let prodInfo = document.querySelector(".prodInfo");
	let confirm = document.querySelector(".confirm");
	let selectMem = document.querySelector(".selectMem");
	let infoDetail = document.querySelector(".infoDetail");
	let check = document.querySelector(".check");
	let member = document.querySelector(".member");
	let send = document.querySelector(".send");
	let selectAll = document.querySelector(".selectAll");
	let nextStep = document.querySelector(".nextStep")
	let memTab = document.querySelector(".memTab")
	let isAll = true;
	let memArr = [];
	let mesId = '';
	
	
	
	function renderForm(){
		  layui.use('form', function(){
		   var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
		   form.render();
		  });
		}
	
	layui.use(['jquery', 'mockjs', 'table', 'sidebar', 'form','route','layedit','element'], function () {
			var $ = layui.jquery,
	      layer = layui.layer,
	      table = layui.table,
	      element = layui.element,
	      sidebar = layui.sidebar,
	      route = layui.route,
	      params = route.params(),
	      layedit = layui.layedit,
	      form = layui.form;
	      
//			console.log("params",params.id)

		nextStep.addEventListener("click",function(){
			console.log(1)
//			element.tabChange('huanTab', 'tabMem');
			mem.classList.add("layui-this")
			xx.classList.remove("layui-this")
			xxtab.classList.remove("layui-show");
			memTab.classList.add("layui-show")
			form.render()
		})
		
	      
	      let _Mobj = {
	      	"Guid": "00000000-0000-0000-0000-000000000000",
			  "Title": "",
			  "Type": "",
			  "Content": "",
			  "LoginId": localStorage.getItem("user"),
			  "CreateTime": "",
			  "IsDeleted": 0
	      }
	      
	      DBHelper.Get("GetXn_RankByCategoryId?id=0",function(data){
	      	console.log(data)
	      	data.forEach((el,index)=>{
	      		let op = document.createElement('option');
    		  	
    		  	op.value = el.Guid;
    		  	op.innerText = el.Name;
    		  	selectMem.appendChild(op)
//		    		  	console.log(op.id)
	      	})
	      	
			form.render();
			
						
	      },function(data){
	      	console.log(data)
	      })
	      
	      
//	      DBHelper.Get("GetXn_MemberByRankGuid?id=99934e79-c437-4d30-8704-bf474714a00f",function(data){
//	      	console.log("所有会员",data)
//	      },function(data){
//	      	console.log(data)
//	      })
	      
	      selectAll.addEventListener("click",function(){
//			      		isAll = !isAll;
//						console.log("memArr.length",memArr.length);
//						console.log("member.children.length",member.children.length);
			      		
			      		if(memArr.length<member.children.length){
			      			memArr = [];
//			      			console.log(member.children)
			      		
				      		for(let i=0;i<member.children.length;i++){
//				      			console.log(1,member.children[i].firstChild.value)
				      			member.children[i].firstChild.checked=true;
				      			renderForm();
				      			memArr.push(member.children[i].firstChild.value)
				      			
				      		}
			      		}else if(memArr.length==member.children.length){
			      			memArr = [];
			      			for(let i=0;i<member.children.length;i++){
//				      			console.log(1,member.children[i].firstChild)
				      			member.children[i].firstChild.checked=false;
				      			renderForm()
				      		}
			      		}
			      		
			      	})
	      
	      check.addEventListener("click",function(){
	      	memArr = [];
//	      	console.log("memArr",memArr)
	      	$(".member").empty();
	      	if($("select[name='selectMem'] option:selected").val()=="all"){
	      		DBHelper.Get("Admin_Xn_Member",function(data){
	      			console.log("所有会员",data)
			      	data.forEach((el,index)=>{
			      		member.innerHTML += `<div class="memItem"><input type="checkbox" class="mem" lay-filter="memList" lay-skin="primary" value="${el.MemLoginId}" name="" title="${el.RealName}"></div> `
			      	})
			      	renderForm();
			      	
			      	form.on('checkbox(memList)',function(data){
			      		console.log("值",data.value)
			      		
			      		if(data.elem.checked){
			      			memArr.push(data.value)
			      		}else{
			      			memArr.splice(memArr.indexOf(data.value),1)
			      		}
			      		console.log("memArr",memArr)
			      	})
			      	
			      	
			      	
	      		},function(data){
	      			console.log(data)
	      		})
	      	}else{
	      		console.log("会员值",$("select[name='selectMem'] option:selected").val())
				DBHelper.Get("GetXn_MemberByRankGuid?id="+$("select[name='selectMem'] option:selected").val(),function(data){
			      	console.log("所有会员",data)
			      	data.forEach((el,index)=>{
			      		member.innerHTML += `<div class="memItem"><input type="checkbox" class="mem" lay-filter="memList" lay-skin="primary" value="${el.MemLoginId}" name="" title="${el.RealName}"></div> `
			      	})
			      	renderForm();
			      	
			      	form.on('checkbox(memList)',function(data){
			      		console.log("值",data.value)
			      		
			      		if(data.elem.checked){
			      			memArr.push(data.value)
			      		}else{
			      			memArr.splice(memArr.indexOf(data.value),1)
			      		}
			      		console.log("memArr",memArr)
			      	})
			      	
//			      	selectAll.addEventListener("click",function(){
//			      		isAll = !isAll;
//			      		
//			      		if(memArr.length<member.children.length){
//			      			memArr = [];
//			      			console.log(member.children)
//			      		
//				      		for(let i=0;i<member.children.length;i++){
//				      			console.log(1,member.children[i].firstChild.value)
//				      			member.children[i].firstChild.checked=true;
//				      			renderForm();
//				      			memArr.push(member.children[i].firstChild.value)
//				      			
//				      		}
//			      		}else if(memArr.length==member.children.length){
//			      			memArr = [];
//			      			for(let i=0;i<member.children.length;i++){
//				      			console.log(1,member.children[i].firstChild)
//				      			member.children[i].firstChild.checked=false;
//				      			renderForm()
//				      		}
//			      		}
//			      		
//			      	})
			      	
			      },function(data){
			      	console.log(data)
			      })
	      	}
	      	
	      	
	      })
	      
		  var index = layedit.build('demo'); //建立编辑器
		  
//		  send.addEventListener("click",function(){
//		  	if(mesId){
//		  		if(memArr.length==0){
//			  		console.log("添加成员")
//			  	}else{
//			  		console.log("memArr",memArr)
//			  		DBHelper.PostArr("Admin_Xn_MessageInfo?xn_MessageInfoGuid="+mesId,memArr,function(data){
//			  			console.log("发送成功",data)
//			  		},function(data){
//			  			console.log("发送失败",data) 
//			  		})
//			  	}
//		  	}
//		  	
//		  })
		  
		  function _confirm(){
//		  	debugger
//		  	_obj.Name = meetName.value;
//		  	_obj.StartTime = startTime.value;
//		  	_obj.Detail = layedit.getContent(index);
			
			console.log("infoName",infoName.value);
			console.log("infoDetail",infoDetail.value)
			_Mobj.Title = infoName.value;
			_Mobj.Content = infoDetail.value;
			_Mobj.CreateTime = getNowFormatDate();
			
			if(memArr.length>=1){
				DBHelper.Post("Admin_Xn_MessageInfo",_Mobj,function(data){
			  		console.log("成功",data)
			  		mesId = data.Guid;
			  		console.log("memArr",memArr)
			  		DBHelper.PostArr("Admin_Xn_MessageInfo?xn_MessageInfoGuid="+mesId,memArr,function(data){
				  			console.log("发送成功",data)
				  			let index = layer.alert("发送成功",function(){
				  				window.location.href="#/layui/xitongXiaoxi"
				  				layer.close(index)
				  			})
				  			
				  		},function(data){
				  			console.log("发送失败",data) 
				  		})
			  	},function(data){
			  		console.log(data)
			  	})
			}else if(memArr.length==0){
				layer.confirm("请选择发送成员")
			}
		  	
		  	
//		  	if(mesId){
//		  		if(memArr.length==0){
//			  		console.log("添加成员")
//			  	}else{
//			  		console.log("memArr",memArr)
//			  		DBHelper.PostArr("Admin_Xn_MessageInfo?xn_MessageInfoGuid="+mesId,memArr,function(data){
//			  			console.log("发送成功",data)
//			  		},function(data){
//			  			console.log("发送失败",data) 
//			  		})
//			  	}
//		  	}
		  	
		  	
//		  	if(params == null) {
//		  		_obj.CreateTime = getNowFormatDate();
//		  		_obj.CreateUser = localStorage.getItem("user");
//		  		
//		  		
//		  		_obj.Guid = "00000000-0000-0000-0000-000000000000";
//		  		console.log("_obj",_obj)
//		  		
////		  		console.log("layedit.getContent(index)",layedit.getContent(index))
//		  		
//		  		DBHelper.Post("Admin_Xn_Meeting",_obj,function(data){
//		  			console.log(data)
//					window.location.href="#/layui/meetList";
//		  		},function(data){
//		  			console.log(data)
//		  		})
//		  	}else{
//		  		_obj.ModifyTime = getNowFormatDate();
//		  		_obj.Guid = params.id;
//		  		_obj.ModifyUser = localStorage.getItem("user");
//		  		
////		  		console.log(_obj)
//		  		
//		  		DBHelper.Put("Admin_Xn_Meeting?id=" + params.id, _obj, function(data) {
//		  			console.log(data)
//						window.location.href="#/layui/meetList";
//					}, function(data) {
//						console.log(data)
//					})
//		  	}
		  }
		  
		  
		  
		  
		  
//		  confirm.addEventListener("click",_confirm)
			form.on('submit(queding)',_confirm);
		  
		console.log(1)
	//layui.use('layedit', function(){
	//var layedit = layui.layedit;
	//layedit.build('demo'); //建立编辑器
	//});
	})
</script>

<style scoped>
	.member{
		width: 300px;
		height: 500px;
		border: 1px solid #000000;
		margin-top: 10px;
		overflow-y: scroll;
	}
		.haveTo{
			color: red;
		}
		.memItem{
			margin: 8px 0 0 5px;
		}
		.meetInfo{
			position: relative;
		}
		.fr{
			float: right;
		}
		.fl{
			float: left;
		}
		.clearfix::after{
			content: "";
			display: block;
			width: 100%;
			height: 0;
			clear: both;
		}
		.meetIntro{
			position: relative;
		}
		.limit{
			position: absolute;
			bottom: 5px;
			right: 10px;
		}
      	.title{
      		margin-left: 30px;
      		margin-top: 30px;
      	}
      	.checkBtn{
      		border-radius: 5px;
      		width: 100px;
      	}
      	.listBtns{
      		display: flex;
      		justify-content: space-between;
      		width: 100%;
      	}
      	.listBtn{
      		border-radius: 5px;
      	}
      	.addFHBtn{
      		text-align: center;
      		margin-top: 20px;
      		margin-bottom: 20px;
      	}
      	/*.addFHBtn button{
      		display: inline-block;
      		width: 300px;
      	}*/
      	.meetBtn{
      		width: 150px;
      	}
      </style>